<template>
  <div class="review">
    <h2>商品评价</h2>
    
    <el-card v-for="item in orderItems" :key="item.id" class="review-item">
      <div class="product-info">
        <el-image :src="item.product.imageUrl" :alt="item.product.name" />
        <div class="product-detail">
          <h3>{{ item.product.name }}</h3>
          <p class="price">¥{{ item.price }}</p>
        </div>
      </div>
      
      <div class="review-form">
        <el-form :model="reviewForms[item.id]" :rules="rules" ref="formRefs[item.id]">
          <el-form-item label="评分" prop="rating">
            <el-rate
              v-model="reviewForms[item.id].rating"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            />
          </el-form-item>
          <el-form-item label="评价内容" prop="content">
            <el-input
              type="textarea"
              v-model="reviewForms[item.id].content"
              :rows="4"
              placeholder="请输入您的评价"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    
    <div class="actions">
      <el-button type="primary" :loading="submitting" @click="submitReviews">
        提交评价
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

const route = useRoute()
const router = useRouter()
const store = useStore()

const orderItems = ref([])
const reviewForms = reactive({})
const formRefs = ref({})
const submitting = ref(false)

const rules = {
  rating: [{ required: true, message: '请选择评分' }],
  content: [{ required: true, message: '请输入评价内容' }]
}

const loadOrderItems = async () => {
  try {
    const orderId = route.params.orderId
    const response = await store.dispatch('order/getOrderDetail', orderId)
    orderItems.value = response.items
    
    // 初始化每个商品的评价表单
    orderItems.value.forEach(item => {
      reviewForms[item.id] = {
        rating: 5,
        content: ''
      }
    })
  } catch (error) {
    ElMessage.error('加载订单信息失败')
    router.push('/orders')
  }
}

const submitReviews = async () => {
  // 验证所有表单
  const validatePromises = Object.keys(formRefs.value).map(key => 
    formRefs.value[key].validate()
  )
  
  try {
    await Promise.all(validatePromises)
  } catch (error) {
    return
  }
  
  submitting.value = true
  try {
    const reviews = orderItems.value.map(item => ({
      orderId: route.params.orderId,
      productId: item.product.id,
      rating: reviewForms[item.id].rating,
      content: reviewForms[item.id].content
    }))
    
    await store.dispatch('review/submitReviews', reviews)
    ElMessage.success('评价提交成功')
    router.push('/orders')
  } catch (error) {
    ElMessage.error('评价提交失败')
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  loadOrderItems()
})
</script>

<style scoped>
.review {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.review-item {
  margin-bottom: 20px;
}

.product-info {
  display: flex;
  margin-bottom: 20px;
}

.product-info .el-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.product-detail h3 {
  margin: 0 0 10px 0;
}

.price {
  color: #f56c6c;
  font-size: 16px;
}

.review-form {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.actions {
  margin-top: 20px;
  text-align: center;
}
</style> 